<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <title>优化样式1</title>
    <style type="text/css">
    body {
        margin: 0;
    }

    input {
        padding: 0;
        margin: 0;
        border: 0;
    }

    .female,
    .male {
        position: relative;
        /* 设置为相对定位，以便让子元素能绝对定位 */
        height: 40px;
        line-height: 40px;
        margin-left: 40px;
    }

    .sex label {
        display: block;
        height: 40px;
        width: 40px;
        line-height: 40px;
        font-size: 20px;
        cursor: pointer;
    }

    .sex input {
        z-index: 3;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 40px;
        margin: auto;
        /* 这里及以上的定位，可以让该元素竖直居中。(top: 0; bottom: 0;) */
        opacity: 0;
        display: block;
        width: 30px;
        height: 30px;
        cursor: pointer;
    }

    .sex span {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 40px;
        margin: auto;
        display: block;
        width: 25px;
        height: 25px;
        border: 1px solid #000;
        border-radius: 50%;
        cursor: pointer;
    }

    .sex span.active {
        background-color: #000;
    }
    </style>
</head>

<body>
    <form action="">
        <div class="sex">
            <div class="female">
                <label for="female">女</label>
                <input type="radio" name="sex" id="female">
                <span class="female-custom"></span>
                <!-- 同下面的 span 一样作为自定义的元素 -->
            </div>
            <div class="male">
                <label for="male">男</label>
                <input type="radio" name="sex" id="male">
                <span class="male-custom"></span>
            </div>
        </div>
    </form>
    <script src="../js/jquery-2.1.0.min.js"></script>
    <script>
    $(function() {
        $("#male").click(function() {
            $(this).siblings("span").addClass("active");
            $(this).parents("div").siblings("div").children("span").removeClass("active");
        });
        $("#female").click(function() {
            $(this).siblings("span").addClass("active");
            $(this).parents("div").siblings("div").children("span").removeClass("active");
        });
    })
    </script>
</body>

</html>